.container {
  // margin-top: 68px;
  // padding: 0 20px 150px 20px;
  margin: 40px 0;
  padding: 0 20px;
}

.content {
  // height: 306px;
  // 展示用户信息
  .userInfo {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    // 头像
    .userAvatar {
      width: 120px;
      height: 120px;
      overflow: hidden;
      border-radius: 50%;
      > image {
        width: 120px;
        height: 120px;
        border-radius: 50%;
      }
    }
    // 当前是未登录状态的时候 展示的文本元素应该进行剧中展示
    .center {
      display: flex !important;
      align-items: center;
      > view {
        margin-top: 0 !important;
      }
    }
    // 其他内容
    .userInfoContent {
      display: inline-block;
      height: 120px;
      margin-left: 16px;
      vertical-align: top;
      // 展示名称和唯一凭证
      > view {
        display: flex;
        margin-top: 15px;
        margin-bottom: 8px;
        > text {
          color: #fff;
          font-weight: bold;
          font-size: 36px;
        }
        > view {
          width: 48px;
          height: 48px;
          margin-left: 16px;
          line-height: 48px;
          text-align: center;
          background-color: #fcb101;
          border-radius: 50%;
        }
      }
      > text {
        color: #fff;
        font-weight: bold;
        font-size: 24px;
      }
    }
  }
  // 心晴指数panel
  .dataPanel {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 40px;
    padding: 20px 0;
    background-color: #1d0f4b;
    border-radius: 48px;
    box-shadow: 0 3px 10px 0 rgba(0, 0, 0, 0.08);
    // 每个元素的样式
    .dataPanelItem {
      > view {
        position: relative;
        // 头部
        &:nth-of-type(1) {
          > text {
            &:nth-of-type(1) {
              color: rgba(255, 255, 255, 0.5);
              font-weight: bold;
              font-size: 24px;
            }
            &:nth-of-type(2) {
              position: absolute;
              top: 0;
            }
          }
        }
        // 底部
        &:nth-of-type(2) {
          margin-top: 12px;
          text-align: center;
          > text {
            color: #fff;
            font-weight: bold;
            font-size: 40px;
          }
        }
      }
      // 当前元素展示心理预警
      .warnItem {
        > text {
          color: #3b9a90 !important;
        }
        > view {
          position: absolute;
          bottom: -70px;
          left: 7px;
          text-align: center;
          > view {
            // 三角形
            &:nth-of-type(1) {
              width: 0;
              height: 0;
              margin: 0 auto;
              border-right: 12px solid transparent;
              border-bottom: 20px solid #3b9a90;
              border-left: 12px solid transparent;
            }
            &:nth-of-type(2) {
              height: 36px;
              padding: 4px 24px 12px 24px;
              line-height: 36px;
              background-color: #3b9a90;
              border-radius: 40px;
              > text {
                color: #fff;
                font-weight: bold;
                font-size: 20px;
              }
            }
          }
        }
      }
    }
    // 分割线
    .borderLine {
      display: inline-block;
      width: 1px;
      height: 52px;
      margin: 0 60px;
      background-color: rgba(255, 255, 255, 0.2);
    }
  }
}
